<template>
  <h1>接收传过来的值：{{ name }}</h1>
  <el-button @click.stop="setCount">状态管理：{{ count }}</el-button>
  <div style="color: red">{{ user }}</div>

  <div style="color: blue">{{ bpf }} --</div>
  <el-button @click.stop="onChange">我去更改值</el-button>
</template>

<script>
import { sync, call } from '~vuex-helper'
import { computed, reactive, ref } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'c-c-c',
  async setup(props, context) {
    console.log(props)
    console.log(context)
    const store = useStore()
    console.log(store)
    const name = ref('卞鹏飞')
    let bpf = await sync('user/timestamp')
    const count = computed(() => store.state.count)
    console.error(count, bpf.value)
    const ajaxFn = call('user/ajax')
    return {
      name,
      count: computed(() => store.state.count),
      user: computed(() => store.state.user),
      bpf: computed(() => store.state.user),
      setCount: () => {
        store.state.count++
        store.state.user.timestamp = Number(new Date())
        store.dispatch('user/ajax', { name: '蔡徐坤' })
      },
      onChange() {
        bpf.value = Number(new Date())
      }
    }
  },

  methods: {
    _name: call('user/ajax')
  }
}
</script>

<style scoped lang="scss">
a {
  color: #42b983;
}
div {
  display: flex;
}
.block {
  .block__title {
    color: red;
    display: flex;
    align-items: center;
  }
}
</style>
